<template>
  <el-card class="server-card" :class="statusClass">
    <div class="server-header">
      <div class="server-name">
        <el-icon :size="18"><Monitor /></el-icon>
        <span>{{ server.name }}</span>
      </div>
      <el-tag :type="statusType" class="status-tag">{{ server.status }}</el-tag>
    </div>

    <div class="server-info">
      <div class="info-row">
        <el-icon :size="16"><Monitor /></el-icon>
        <span>{{ server.ip }}:{{ server.port }}</span>
      </div>
      <div class="info-row">
        <el-icon :size="16"><User /></el-icon>
        <span>{{ server.players }}/{{ server.maxPlayers }} 玩家</span>
      </div>
      <div class="info-row">
        <el-icon :size="16"><Clock /></el-icon>
        <span>{{ server.uptime || '未运行' }}</span>
      </div>
    </div>

    <div class="server-actions">
      <el-button
        :icon="server.status === '运行中' ? CirclePause : CirclePlay"
        :disabled="server.status === '维护中'"
        :type="server.status === '运行中' ? 'warning' : 'success'"
        size="small"
        @click="handleStatusChange"
      />
      <el-button :icon="Setting" size="small" class="ml-2" @click="handleSettings" />
      <el-button :icon="MoreVert" size="small" class="ml-2" @click="handleMore" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Monitor, User, Clock, CirclePlay, CirclePause, Setting, MoreVert } from '@element-plus/icons-vue';
interface Server {
  id: number;
  name: string;
  ip: string;
  port: number;
  status: '运行中' | '已停止' | '维护中';
  players: number;
  maxPlayers: number;
  uptime?: string;
}

const props = defineProps<{
  server: Server;
}>();

const emit = defineEmits<{
  (e: 'status-change', id: number): void;
  (e: 'settings', id: number): void;
  (e: 'more', id: number): void;
}>();

const statusType = computed(() => {
  switch (props.server.status) {
    case '运行中':
      return 'success';
    case '已停止':
      return 'danger';
    case '维护中':
      return 'warning';
    default:
      return 'default';
  }
});

const statusClass = computed(() => `status-${props.server.status.toLowerCase()}`);

const handleStatusChange = () => {
  emit('status-change', props.server.id);
};

const handleSettings = () => {
  emit('settings', props.server.id);
};

const handleMore = () => {
  emit('more', props.server.id);
};
</script>

<style scoped>
.server-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.server-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.server-name {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #1e293b;
}

.server-name span {
  margin-left: 8px;
}

.status-tag {
  font-size: 12px;
  padding: 3px 8px;
}

.server-info {
  flex: 1;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 14px;
}

.info-row span {
  margin-left: 8px;
}

.server-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f1f5f9;
}

.ml-2 {
  margin-left: 8px;
}

.status-运行中 {
  border-top: 3px solid #10b981;
}

.status-已停止 {
  border-top: 3px solid #ef4444;
}

.status-维护中 {
  border-top: 3px solid #f59e0b;
}
</style>